<template>
  <div id="app">
    <!-- 搜索 -->
    <div class="home_search" v-if="isHideSearch" style="position: fixed;z-index: 999;width: 100vw;">
      <van-search background="#fff" placeholder="请输入搜索关键词" @focus="toSearch" />
    </div>
    <div class="nav-bar" v-else-if="$route.name == 'cart'">
      <van-nav-bar :title="$route.name" />
    </div>

    <router-view />

    <!-- 搜索弹框 -->
    <div class="search">
      <!--搜索 -->
      <van-popup v-model="show" position="right" :style="{ height: '100%', width: '100%' }" :overlay="false"
        style="background: #eeeeee;">
        <van-search v-model="params.keyword" show-action :placeholder="defaultKeyword.keyword" @search="onSearch"
          @cancel="onCancel" />
        <div class="search-container" style="position: relative; width: 100vw;background: #fff; padding:10px;">
          <div class="tag-list" v-if="!params.keyword">
            <div class="search-list history">
              <div class="list-header">
                <div class="title" style="font-size: 18px;">搜索历史</div>
                <div class="right">
                  <van-icon name="delete" />
                </div>
              </div>
              <div class="list-content">
                <div class="tag" v-for="(item, index) in historyKeywordList" :key="index"
                @click="onSearch(item)"
                  style="display: inline-block; margin:0 5px 5px 0; padding: 3px 10px;color: #666666; border: 1px solid lightgray;border-radius: 5px;font-size: 13px;">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="search-list hot">
              <div class="list-header">
                <div class="title" style="font-size: 18px;">搜索历史</div>
              </div>
              <div class="list-content">
                <div v-for="(item, index) in hotKeywordList" :key="index"
                @click="onSearch(item.keyword)"
                  :class="item.is_hot == 1 ? 'active tag' : 'tag'"
                  style="display: inline-block; margin:0 5px 5px 0; padding: 3px 10px;color: #666666; border: 1px solid lightgray;border-radius: 5px;font-size: 13px;">
                  {{ item.keyword }}
                </div>
              </div>
            </div>
          </div>
          <div class="search-after" v-else>
            <van-dropdown-menu>
              <van-dropdown-item v-model="params.sort" disabled :options="option1"/>
              <van-dropdown-item v-model="params.order" :options="option2" />
              <van-dropdown-item v-model="params.categoryId" :options="option3" />
            </van-dropdown-menu>
          </div>
        </div>
        <div class="goods-list" style="padding: 10px; display: flex;justify-content: space-between;flex-wrap: wrap;">
          <div class="good-card" v-for="item in goodsList" :key="item.id" style="width: 49%;background: #fff;border-radius: 10px;text-align: center;">
            <img :src="item.list_pic_url" alt="" style="width: 100%;height: 70%;"/>
            <div class="name" style="color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding: 0 10px;">{{ item.name }}</div>
            <div style="color: red;font-size: 13px;margin-top: 5px;">￥{{ item.retail_price }}元</div>
          </div>
        </div>
      </van-popup>

    </div>

    <van-tabbar route v-model="active" active-color="#ee0a24" inactive-color="#000" v-if="isHideTabBar">
      <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/special" icon="search">专题</van-tabbar-item>
      <van-tabbar-item to="/category" icon="list-switch">分类</van-tabbar-item>
      <van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="contact-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { getSearchIndex, getSearchList } from '@/api'
export default {
  data() {
    return {
      value: 5,
      active: '',
      isHideSearch: true,
      isHideTabBar: false,
      show: false,
      keyword: '',
      defaultKeyword: [],
      historyKeywordList: [],
      hotKeywordList: [],
      params: {
        keyword: '',
        page: 1,
        size: 10,
        order: 'asc',
        categoryId: 0,
        sort: 'id'
      },
      filterCategory: [],
      goodsList: [],
      option1:[
        {text:'综合',value:'id'}
      ],
      option2:[
        {text:'价格',value:''},
        {text:'升序',value:'asc'},
        {text:'降序',value:'desc'},
      ],
      option3:[
        {text:'分类',value:-1},
        {text:'全部',value:0},
      ],
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        this.isHideSearch = !(newVal.path == "/user" || newVal.path == "/cart" || newVal.path == "/search" || newVal.path == "/goodsDetail" || newVal.path == "/list");
        this.isHideTabBar = !(newVal.path == "/goodsDetail")
      },
      immediate: true, //立即监听
      // deep:true//深度简体
    },
  },
  mounted() {
    this.initSearchData()
  },
  methods: {
    async initSearchData() {
      const {
        data: {
          data: { defaultKeyword, historyKeywordList, hotKeywordList }
        },
      } = await getSearchIndex();
      this.defaultKeyword = defaultKeyword
      this.historyKeywordList = historyKeywordList
      this.hotKeywordList = hotKeywordList
    },
    toSearch() {
      this.show = true
      this.initSearchData()
    },
    async onSearch(keyword) {
      if (keyword) this.params.keyword = keyword
      const {
        data: {
          data: { filterCategory, goodsList }
        },
      } = await getSearchList(this.params);
      this.filterCategory = filterCategory
      this.goodsList = goodsList
    },
    onCancel() {
      this.show = false
    }
  }
};
</script>

<style>
* {
  box-sizing: border-box
}

html {
  font-size: 18px;
}

body {
  background-color: #fff;
}

#app {
  padding-bottom: 50px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-list {
  padding: 10px 0 30px 0;
  border-bottom: 1px solid lightgray;
}

.active {
  color: red !important;
  border: 1px solid red;
}
</style>
